<template>
	<view class="t-flex inputbox" @click="show = true">
		<text :class="{'hide':!value}">{{value || placeholder}}</text>
		 <text class="line" v-if="show"></text>
	</view>
	
	
	<view class="mask" @click="show = false" v-if="show"></view>
	<view class="container" :class="{'open':show}">
		<view class="keyboard t-flex between">
			<view class="left">
				<view class="row t-flex between" 
				v-for="(item,index) in keyList" :key="index">
					<view class="key t-flex center"
					:class="{'key2':char === 0}"
					v-for="char in item"
					:key="char"
					@click="change(char)"
					>{{char}}</view>
				</view>
			</view>
			<view class="right">
				<view class="del t-flex center" @click.stop="del">
					<image src="./del.png" mode="aspectFit" class="delicon"></image>
				</view>
				<view class="confirm t-flex center" @click="emit('confirm');show=false">
					确定
				</view>
			</view>
		</view>
		<view class="safeArea"></view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
	
	
	const emit = defineEmits(['update:modelValue','confirm'])
	const props = defineProps({
		modelValue:{
			type:String,
			default:'0'
		},
		placeholder:{
			type:String,
			default:'请输入'
		}
	})
	
	//按键列表
	let keyList = [[1,2,3],[4,5,6],[7,8,9],[0,'.']]
	let show = ref(false)
	
	
	const value = computed({
		get(){
			return props.modelValue
		},
		set(value){
			emit('update:modelValue',value)
		}
	})
	
	
	
	
	//点击按键
	const change = (char)=>{
		let float = value.value.split('.')[1]
		if(value.value.includes('.') && char === '.') return //只能拥有一个小数点
		if(float && float.length>=2) return //只能拥有2位小数
		let newValue = value.value+char
		emit('update:modelValue',newValue)
	}
	
	const del = ()=>{
		let newValue = value.value.slice(0,value.value.length-1)
		emit('update:modelValue',newValue)
	}
	
	
	
</script>

<style scoped lang="scss">
	.container{
		border-top: 1px solid #fff;
		background-color: #eee;
		width: 100%;
		position: fixed;
		bottom: -100%;
		transition: all 300ms;
		z-index: 3000;
		left:0;
		.keyboard{
			padding: 10rpx;
		}
		.left{
			width: 75%;
			.key{
				background-color: #fff;
				width: 32%;
				height: 90rpx;
				margin: 5rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				border-radius: 5rpx;
				&:active{
					background-color: #f1f1f1;
					color: #666;
				}
			}
			.key2{
				width: 66%;
			}
		}
		.right{
			width: 25%;
			padding-left: 10rpx;
			.confirm{
				background-color: $main-color;
				color: #fff;
				height: 290rpx;
				border-radius: 5rpx;
				&:active{
					color: #333;
				}
			}
			.del{
				background-color: #fff;
				height: 90rpx;
				margin-bottom: 10rpx;
				border-radius: 5rpx;
				&:active{
					background-color: #f1f1f1;
				}
			}
		}
	}
	.container.open{
		bottom: 0;
	}
	@keyframes op {
		50%,100%{
			opacity: 1;
		}
		25%,75%{
			opacity: 0;
		}
	}
	.line{
		animation: op 2000ms infinite;
		border-left: 1rpx solid $main-color;
		height: 1em;
		margin-left: 6rpx;
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 2999;
	}
	.delicon{
		width: 80rpx;
		height: 60rpx;
	}
	.hide{
		color: #999;
	}
</style>